#CSS Grid Layout

CSS Grid Layout is a powerful 2D layout system that gives precise control over rows and columns in a layout. It is better suited for structured arrangements than Flexbox.

By setting an element’s display property to grid, you turn it into a grid container.

You can configure the container’s columns with the grid-template-columns property and rows with the grid-template-rows property.

Example:

<!-- A grid with four columns, widths are 40px, 80px, 120px, and 160px respectively -->
<div style="display:grid; grid-template-columns:40px 80px 120px 160px;">
    <div style="background-color:red;height:40px;"></div>
    <div style="background-color:yellow;height:40px;"></div>
    <div style="background-color:blue;height:40px;"></div>
    <div style="background-color:orange;height:40px;"></div>
    <div style="background-color:green;height:40px;"></div>
    <div style="background-color:purple;height:40px;"></div>
    <div style="background-color:cyan;height:40px;"></div>
    <div style="background-color:pink;height:40px;"></div>
</div>

display:grid

#The fr Unit

You can use the special fr unit to create columns of equal width. For example:

<!-- A grid with four equally wide columns -->
<div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr;">
    <div style="background-color:red;height:40px;"></div>
    <div style="background-color:yellow;height:40px;"></div>
    <div style="background-color:blue;height:40px;"></div>
    <div style="background-color:orange;height:40px;"></div>
    <div style="background-color:green;height:40px;"></div>
    <div style="background-color:purple;height:40px;"></div>
    <div style="background-color:cyan;height:40px;"></div>
    <div style="background-color:pink;height:40px;"></div>
</div>

grid-template-columns:1fr 1fr 1fr 1fr

#repeat

You can simplify the syntax with the repeat function:

repeat(number of repetitions, value to repeat)

Example:

<!-- A grid with four equally wide columns -->
<div style="display:grid; grid-template-columns:repeat(4, 1fr);">
    <div style="background-color:red;height:40px;"></div>
    <div style="background-color:yellow;height:40px;"></div>
    <div style="background-color:blue;height:40px;"></div>
    <div style="background-color:orange;height:40px;"></div>
    <div style="background-color:green;height:40px;"></div>
    <div style="background-color:purple;height:40px;"></div>
    <div style="background-color:cyan;height:40px;"></div>
    <div style="background-color:pink;height:40px;"></div>
</div>

grid-template-columns:repeat(4, 1fr)

#minmax

The minmax function allows you to set the minimum and maximum width of a grid item. It is often used with repeat and is great for responsive designs.

repeat(number of repetitions, minmax(min width, max width))

Repetition is usually combined with auto-fill or auto-fit:

auto-fill: fills the row with as many columns as possible, even if some are empty
auto-fit: fits items into columns and stretches them to fill the available space

Example:

<!-- Grid items with min width 100px, max 1fr (stretch), auto-fill mode -->
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));">
    <div style="background-color:red;height:40px;"></div>
    <div style="background-color:yellow;height:40px;"></div>
    <div style="background-color:blue;height:40px;"></div>
    <div style="background-color:orange;height:40px;"></div>
</div>

<!-- Same but using auto-fit -->
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));">
    <div style="background-color:red;height:40px;"></div>
    <div style="background-color:yellow;height:40px;"></div>
    <div style="background-color:blue;height:40px;"></div>
    <div style="background-color:orange;height:40px;"></div>
</div>

Responsive Grid Layout auto-fill

Responsive Grid Layout auto-fit

In the above example, each cell has a minimum width of 100px and a maximum width of 1fr (i.e., it can expand freely). When the container width is 500px. If column count > 5, the cell width will drop below 100px, which violates the min requirement. So column count ≤ 5.

auto-fill prefers inserting as many columns as possible: 5 columns of 100px each; 4 items fill the first 4.

auto-fit prefers stretching to fill the space: 4 columns for 4 items, each 125px wide.